<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ajax选项卡</title>
		<style type="text/css">
			.container{
				border: 1px solid black;
				height: 400px;
				width: 500px;
				border-radius: 10px;
				background-color: aquamarine;
			}
			.title{
				border: 1px solid red;
				height: 100px;
				width: 500px;
				border-radius: 10px;
			}
			.content{
				border: 1px solid blue;
				height: 300px;
				width: 500px;
				border-radius: 10px;
			}
			#tag{
				border: 1px solid red;
				height: 96px;
				width: 123px;
				border-radius: 10px;
				float: left;
				background-color: antiquewhite;
				text-align: center;
				font-size: 28px;
				color: red;
			}
			img{
				width: 100%;
			}
		</style>
		
	</head>
	<body>
		<div class="container">
			<div class="title">
				<div id="tag" name="tags" class="tag1">小清新</div>
				<div id="tag" name="tags" class="tag2">童颜</div>
				<div id="tag" name="tags" class="tag3">火爆身材</div>
				<div id="tag" name="tags" class="tag4">美女</div>
			</div>
			<div id="contentid" class="content">
				<img src="images/xqx.jpg"/>
			</div>
		</div>
		
		<script type="text/javascript">
			var tags=document.getElementsByName("tags");
			for(var i=0;i<tags.length;i++){
				tags[i].onmouseover=function(){
					this.style.backgroundColor="#0f0";
					switch (this.className){
						case "tag4":
							showContent('nc');
							break;
						case "tag3":
							showContent('hbsc');
							break;
						case "tag2":
							showContent('tyj');
							break;
						case "tag1":
							showContent('xqx');
							break;
						default:
							break;
					}
				}
				tags[i].onmouseout=function(){
					this.style.backgroundColor="antiquewhite";
				}
			}
			
			function showContent(str)
			{
				var xmlhttp;
				if(str=="")
				{
					document.getElementById("contentid").innerHTML="";
					return;
				}
				if (window.XMLHttpRequest) {
					xmlhttp=new XMLHttpRequest();
				} else{
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				xmlhttp.onreadystatechange=function(){
					if (xmlhttp.readyState==4 && xmlhttp.status==200) {
						document.getElementById("contentid").innerHTML=xmlhttp.responseText;
					}
				}
				
				xmlhttp.open("GET","showContent.php?p="+str,true);
				xmlhttp.send();
			}
		</script>
	</body>
</html>
